
<!-- 后台生成sku的总结 -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <!-- import CSS -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
        <style>
        .container {
          width:1000px;
          margin:0 auto;
        }
        .attr-box {
          padding:80px;
        }
        .btn {
          margin-left:10px;
          margin-right:30px;
        }
        .check-box{
          display:flex;
        }
        </style>
    </head>

    <body>
        <div id="app">
            <div class="container">
                <div class="attr-box">
                  <div v-for="(item,index) in list" :key="index">
                    <p style="margin-top:30px;">{{item.title}}</p>
                    <el-checkbox-group v-model="item.checked" @change="onChange($event,index)" class="check-box">
                      <div v-for="(innerItem,innerIndex) in item.attr" >
                        <el-checkbox 
                          :label="innerItem.value"
                          :checked="innerItem.checked"
                          @change="onChangeBox($event,index,innerIndex)"
                          > 
                          {{innerItem.value}}
                          </el-checkbox>
                          <el-button size="mini" class="btn" @click="deleteAttr(index,innerIndex)">删除</el-button>
                        </div>
                    </el-checkbox-group> 
                  </div>
                </div>
                <el-button @click="generate" style="margin-left:50%">生成数据</el-button>
                <el-table :data="tableData" border style="width: 800px; margin:40px auto">
                    <el-table-column 
                      :label="item.title" 
                      :key="i"
                      :prop="item.title"
                      v-for="(item, i) in tableAttrs"> 
                    </el-table-column>
                    <el-table-column label="库存"> 
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.stock"><el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="name" label="重量"> 
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.weight"><el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="address" label="商家"> 
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.merchant"><el-input>
                      </template>
                    </el-table-column>
                </el-table>
                <el-button @click="submit" style="margin-left:50%">提交数据</el-button>
            </div>
        </div>
    </body>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    tableData: [],
                    list: [],
                    tableAttrs:[]
                };
            },
            mounted() {
                this.list = [
                    {
                        title: '颜色',
                        attr: [
                            {
                                value: '红色',
                                checked:false,
                            },
                            {
                                value: '蓝色',
                                checked: false,
                            }
                        ],
                        checked:[]
                    },
                    {
                        title: '尺码',
                        attr: [
                            {
                                value: 'X',
                                checked: false,
                            },
                        ],
                        checked:[]
                    },
                    {
                        title: '大小',
                        attr: [
                            {
                                value: '小',
                                checked: false,
                            },
                            {
                                value: '中',
                                checked: false,
                            }
                        ],
                        checked:[]
                    }
                ];
            },
            methods: {
                onChange(val,index){
                  this.list[index].checked=val
                },
                onChangeBox(val,index,innerIndex){
                  this.list[index].attr[innerIndex].checked=val
                  let result = this.generate()
                  this.tableData = this.mergerList([...this.tableData],result)
                },
                filterEmptyAttr(list){
                  let res = list.map(item=>{
                    item.attr=item.attr.filter(el=>el.checked)
                    return item
                  })
                  res = res.filter(item=>item.checked.length>0)
                  return res
                },
                //把新生成的数据和之前的数据对比，防止已经填写的数据被覆盖
                mergerList(oldList,newList){
                  const map = new Map();
                  const getSpecNames = (item) => item.json.map((el) => el.value.value).join(',');
                  oldList.forEach((item) => {
                    const specNames = getSpecNames(item);
                    map.set(specNames, { ...item });
                  });
                  return newList.map((item) => {
                    const specNames = getSpecNames(item);
                    if (map.has(specNames)) {
                      const oldItem = map.get(specNames);
                      return { ...item, ...oldItem };
                    }
                   return item;
                  });
                },
                generate() {
                  //先过滤没有选中的
                 let originList = JSON.parse(JSON.stringify(this.list)); 
                 let filterList = this.filterEmptyAttr(originList)
                  //组合数据
                  let result = filterList.reduce((acc,{title,attr},index)=>{
                    if(index>0){
                      let group = acc.map(item=>attr.map(at=>{
                        return {
                          ...item,
                          [title]:at.value,
                          json:[...item.json,{title,value: { ...at }}]
                        }
                      }))
                      return [].concat(...group);
                    }
                    return attr.map(item=>{
                      return {
                        ...item,
                        [title]:item.value,
                        json:[{title,value: { ...item }}] //保存属性数据，为之后方式数据被覆盖对比
                      }
                    }) 
                  },[])
                 //设置动态的表格头部属性
                 this.tableAttrs = filterList.map((item=>{
                   return {
                     title:item.title
                   }
                 }))
                 //
                 return result.map(item=>{
                   return {
                     ...item,
                     stock: '',
                    weight: '',
                    merchant: ''
                   }
                 })  
                },
                //删除属性
                deleteAttr(index,innerIndex){
                  console.log(index,innerIndex)
                  this.list = this.list.map((item,ids1)=>{
                    if(ids1===index){
                      item.attr=item.attr.filter((el,ids2)=>ids2!==innerIndex)
                    }
                    return item
                  })
                  this.list = this.list.filter(item=>item.attr.length>0)
                  this.generate()
                },
                submit(){
                  console.log('填写表格之后的数据',this.tableData)
                }
              // [{'颜色':'红色'，'尺码':'x','大小':'小}]
            }
        });
    </script>
</html>
